<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <script type="text/javascript" src="https://public.ffquan.cn/lib/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/vue-lazyload.js"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/swiper/js/swiper.min.js"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/taobaoCode/taobaoCode.js?v=1.2.1"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/clipboard.min.js"></script>

    <title>折上折</title>

    <script>
        var _config = {
            appKey: '#APPKEY#',//此处替换成用户appKey
            jumpGoodsUrl: function (items) {   // 替换为详细页面的地址或转链逻辑 
                 wx.miniProgram.navigateTo({ url: '/pagesA/pages/mallA/detail?pt=tb&goodsid=' + items.goodsid })
            }
        };
    </script>
</head>

<body>
<div id="appMain">
    <div class="loading" v-if="loading">
        <span>加载中...</span>
    </div>
    <div class="title">
        <img src=""
             alt="今日折上折">
    </div>
    <section class="banner">
        <span class="desc">
            <img src=""
                 alt="更新时间">
            已于2021-03-09 0点 全网更新
        </span>
    </section>
    <div class="category">
        <div class="items">
            <span :class="active == 0 ? 'act':''" @click="handleSwiperNav(0, $event)">推荐</span>
            <span :class="active == i.id ? 'act':''" v-for="i in nav" :key="i.id"
                  @click="handleSwiperNav(i.id, $event)">
                {{i.title}}
            </span>
        </div>
    </div>
    <div v-if="active == 0">
        <h3 class="qiang"><span>今日必抢</span><span class="zsz">折上再省不止5折</span></h3>
        <div class="goods-wrap">
            <section class="goods">
                <a v-for="v in today" :key="v.id" v-on:click="handleCdetailFavorite(v)">
                    <div class="">
                        <img :src="v.pic"
                             class="fadeIn ">
                        <h5>{{v.dtitle}}</h5>
                        <div class="price___dfbCD">¥<span>{{v.jiage}}</span><u>¥{{v.yuanjia}}</u></div>
                        <div class="discount___1S9U2">
                            <span>淘抢购</span>
                            <span>折上{{zhe(v)}}折</span>
                        </div>
                    </div>
                </a>
            </section>
        </div>
    </div>
    <div>
        <div v-if="active == 0" class="choiceTitle___3ki4D">
            <img src="https://cmsstaticnew.dataoke.com/dist/static/double-discount-choice@2x.d2d5b409.png" alt="为你精选">
        </div>
        <div class="ulist">
            <a v-for="g in goodsItem" :key="g.id" v-on:click="handleCdetailFavorite(g)">
                <div class="detail___3ZQFW">
                    <img :src="g.pic"
                         class="fadeIn picture___r4a1j">
                    <div class="choiceInfo___3ZuEa">
                        <div class="other___2Mv8Q">
                            <h2>
                                <div class="shoplabel___1_Nv0"><img
                                        src="">
                                </div>
                                <span>{{g.title}}</span></h2>
                            <div class="coupon___2SVZi"><span>券</span>{{g.quanJine}}元</div>
                        </div>
                        <div class="price___dfbCD">¥<span>{{g.jiage}}</span><u>聚划算价 ¥{{g.yuanjia}}</u></div>
                        <div class="operation___3KazI"><span>已抢{{digitalAbbNumber({num:g.xiaoliang})}}件</span>
                            <button>马上抢</button>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>


</body>

</html>
<style>
</style>

<script>
    (function () {
        var size = (document.body.clientWidth || document.documentElement.clientWidth);
        document.documentElement.style.fontSize = (size > 750 ? 750 : size) / 7.5 + 'px';
    })();

    Vue.use(VueLazyload, {
        preLoad: 1.3,//
        error: 'https://sr.ffquan.cn/cms_pic/20200622/bro7s7f6vrkd3jat4ujg0.png',
        loading: 'https://sr.ffquan.cn/cms_pic/20200612/brhjkf76vrkcrfpi79eg0.png',
        attempt: 1
    })
    new Vue({
        el: '#appMain',
        data: {
            goodsItem: [],
            nav: [],
            active: 0,
            today: [],
            loading: true,
            sys: {}
        },
        methods: {
            zhe: function (v) {
                return Number(v.discount * 10).toFixed(1);
            },
            accSub: function ({num}) {
                var r1, r2, m, n;
                try {
                    r1 = num[0].toString().split('.')[1].length;
                } catch (e) {
                    r1 = 0;
                }
                try {
                    r2 = num[1].toString().split('.')[1].length;
                } catch (e) {
                    r2 = 0;
                }
                m = Math.pow(10, Math.max(r1, r2)); //last modify by deeka //动态控制精度长度
                n = r1 >= r2 ? r1 : r2;
                return ((num[0] * m - num[1] * m) / m).toFixed(n);
            },
            digitalAbbNumber: function ({num = 0, unit}) {
                var param = {};
                var k = 10000,
                    sizes = ['', '万', '亿', '万亿'],
                    i;
                if (num < k) {
                    return num;
                } else {
                    i = Math.floor(Math.log(num) / Math.log(k));
                    param.value = parseFloat((num / Math.pow(k, i)).toFixed(1));
                    param.unit = sizes[i];
                }
                return param.value + (unit || param.unit);
            },
            init: function () {
                var that = this;
                var url = 'https://dtkapi.ffquan.cn/dtk_go_app_api/v1/page-super-discount-cate'
                $.get(url, function (res) {
                    that.nav = res.data;
                })
                var todayUrl = 'https://dtkapi.ffquan.cn/dtk_go_app_api/v1/page-super-discount-today';
                $.get(todayUrl, function (res) {
                    that.today = res.data;
                })

                this.getGoodsList();
            },
            handleIntersectionObserver: function () {},

            handleSwiperNav: function (key, event) {
                console.log(key, event.target)
                this.active = key;

                var _this = this;
                $(document).scrollTop(0);

                this.active = key;
                setTimeout(function () {
                    _this.getGoodsList();
                }, 200)

            },
            getGoodsList: function () {
                var id = this.active, that = this,
                    url = 'https://dtkapi.ffquan.cn/dtk_go_app_api/v1/page-super-discount?app_key=' + _config.appKey + '&cId=' + id;
                this.loading = true
                $.get(url, function (res) {
                    that.goodsItem = res.data.data.list;
                    that.sys = res.data.sys;
                    that.loading = false
                })
            },
            handleCdetailFavorite: function (g) {
                if (_config.jumpGoodsUrl) {
                    return _config.jumpGoodsUrl(g);
                }
                var params = {
                    site_id: this.sys.uid,

                    pid: this.sys.pid,
                    goodsid: g.goodsid,
                    need_tpwd: 1,
                    gid: g.gid,
                    is_auto_quan: 1,
                    d_title: g.title,
                    need_short_link: 1,
                };
                if (this.sys.channel_id) {
                    params.relationId = this.sys.channel_id;
                }
                return new taobaoCode({
                    type: 1, // type=>1 商品转链  2 活动转链  3自定义跳转
                    ua: ['MicroMessenger', 'WeiBo'], // 定制 UA  ua => [true]不跳转复制淘口令模式
                    modelType: 0, // 0 => 默认成功失败提示 modelType => 1 超级红包 2 =>会场弹窗 （判断类型 默认不传，用途复制成功提示文案判断）
                    isRedPacket: false, // isRedPacket => true 开启红包流程  isRedPacket=> 关闭红包流程 （是否开启红包弹窗流程）
                    params: params,
                    regCode: /\#(.*?)\#/, //替换正则 默认 #淘口令#
                    template: "优惠已生成，复制本段文字¥#淘口令#¥，打开淘宝APP领券购买",//替换模版
                });
            }
        },
        mounted: function () {
            this.init()
        },
    })
</script>
<style>
    html, body {
        padding: 0;
        margin: 0;
        background-color: #f5f5f9;
    }

    * {
        box-sizing: border-box;
    }

    .title img {
        height: 0.36rem;
        vertical-align: middle;
    }

    .title {
        height: 0.9rem;
        line-height: 0.9rem;
        text-align: center;
        background-color: #8e00d7;
        color: white;
        position: fixed;
        width: 100vw;
        z-index: 5;
    }

    .banner {
        height: 3.36rem;
        background-image: url("https://img.alicdn.com/imgextra/i2/2053469401/O1CN016BjNN82JJi1L2MPYl_!!2053469401.png");
        background-size: contain;
        position: relative;
    }

    .desc img {
        width: 0.22rem;
        height: 0.22rem;
        position: relative;
        top: .02rem;
        margin-right: .01rem;
    }

    .desc {
        bottom: 0.45rem;
        left: 50%;
        transform: translateX(-50%);
        padding: 0 0.2rem;
        position: absolute;
        height: .4rem;
        line-height: .4rem;
        background-color: #ff19e0;
        border-radius: .2rem;
        font-size: .24rem;
        font-weight: 400;
        color: #fff;
        white-space: nowrap;
    }

    .category {
        height: 0.88rem;
        line-height: 0.88rem;
        font-size: 0.3rem;
        overflow: hidden;
        padding: 0 0.1rem;
    }

    .items > span.act {
        background: linear-gradient(90deg, #8e00ff, #b20aff);
        color: white;
        padding: 0 0.2rem;
        border-radius: .24rem;
    }

    .items > span {
        color: #333;
        font-weight: 500;
        margin: 0 0.1rem;
        display: inline-block;
        line-height: 0.48rem;
        height: 0.48rem;
    }

    .items {
        overflow: scroll;
        white-space: nowrap;
    }

    .goods::-webkit-scrollbar,
    .items::-webkit-scrollbar {
        display: none;
    }

    .qiang .zsz {
        font-size: 0.22rem;
        color: #888;
        display: inline-block;
        margin-left: .1rem;
    }

    .qiang {
        background-image: url();
        background-size: auto 0.32rem;
        background-repeat: no-repeat;
        background-position: 0.14rem center;
        display: block;
        line-height: 0.72rem;
        height: 0.72rem;
        font-size: 0.3rem;
        box-sizing: border-box;
        padding-left: 0.5rem;
        margin: 0;
    }

    .goods-wrap {
        overflow: hidden;
    }

    .goods {
        display: block;
        white-space: nowrap;
        padding: 0 .14rem;
        font-size: 0;
        overflow: scroll;
    }

    .goods > a {
        display: inline-block;
        text-decoration: none;
    }

    .goods > a > div h5 {
        padding: 0;
        margin: .16rem 0 0;
        height: .32rem;
        font-size: .22rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333;
        line-height: .32rem;
        overflow: hidden;
        white-space: normal;
    }

    .goods > a > div .fadeIn {
        width: 2rem;
        height: 2rem;
        display: block;
        margin: 0 auto;
    }

    .goods > a > div {
        width: 2.2rem;
        box-sizing: border-box;
        padding: .1rem;
        background: #fff;
        border-radius: .16rem;
        margin-right: .1rem;
    }

    .price___dfbCD u {
        text-decoration: line-through;
        width: .64rem;
        font-size: .2rem;
        color: #a7a7a7;
    }

    .price___dfbCD span {
        font-size: .32rem;
        line-height: .34rem;
        padding: 0 .08rem 0 .04rem;
        font-weight: 700;
    }

    .price___dfbCD {
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #fe3738;
        font-size: .22rem;
        justify-content: flex-start;
        height: .34rem;
        margin: .04rem 0 .1rem;
        -webkit-align-items: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

    .discount___1S9U2 span:nth-child(2) {
        font-size: .2rem;
        font-weight: 500;
        line-height: .34rem;
        height: .34rem;
        background: linear-gradient(
                99deg, #9c00ff, #c110ff);
        box-shadow: 0 0.02rem 0.08rem 0 rgb(224 0 255 / 31%);
        border-radius: .18rem .18rem 0 .18rem;
        padding-left: .76rem;
        display: block;
        text-align: right;
        position: relative;
        top: 0.1rem;
    }

    .discount___1S9U2 span:first-child {
        height: .42rem;
        line-height: .42rem;
        background: linear-gradient(
                315deg, #ff80fd, #ff59fe 29%, #f600ff);
        box-shadow: 0.02rem 0 0.06rem 0 rgb(127 20 190 / 20%);
        border-radius: 0 .22rem 0 .16rem;
        font-size: .2rem;
        font-weight: 500;
        padding: 0 .1rem;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 3;
    }

    .discount___1S9U2 {
        height: .42rem;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #fff;
        position: relative;
        margin-bottom: .06rem;
        font-size: 0;
        overflow: hidden;
    }

    .choiceTitle___3ki4D img {
        width: 1.66rem;
        height: .7rem;
        vertical-align: top;
        display: block;
        border: none;
    }

    .choiceTitle___3ki4D {
        padding-top: .18rem;
        background-color: #f6f6f6;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .ulist > a {
        display: block;
        text-decoration: none;
    }

    .ulist {
        display: block;
    }

    .detail___3ZQFW {
        background-color: #fff;
        height: 2.2rem;
        border-radius: .16rem;
        margin: .2rem .2rem 0;
        padding: .1rem;
        position: relative;
        box-sizing: border-box;
    }

    .picture___r4a1j {
        height: 2rem;
        width: 2rem;
        border-radius: .1rem;
        position: absolute;
        left: .1rem;
        top: .1rem;
    }

    .choiceInfo___3ZuEa {
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding-left: 2.2rem;
        height: 2rem;
        width: 100%;
        overflow: hidden;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
    }

    .other___2Mv8Q h2 span {
        width: calc(100vw - 3.6rem);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .other___2Mv8Q h2 {
        justify-content: flex-start;
        padding: 0;
        margin: 0;
        height: .4rem;
        font-size: .28rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: .4rem;
        color: #333;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .shoplabel___1_Nv0 img {
        margin-right: .05rem;
        display: block;
        height: 100%;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    .shoplabel___1_Nv0 {
        height: .26rem;
        float: left;
        position: relative;
        top: .05rem;
    }

    .coupon___2SVZi span {
        display: inline-block;
        font-size: .18rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff5351;
        line-height: .19rem;
        padding: 1px .04rem;
        background: #fff;
        border-radius: .02rem 0 0 .02rem;
        text-align: center;
        margin-right: .06rem;
    }

    .coupon___2SVZi {
        margin-top: 6px;
        height: .24rem;
        background: linear-gradient(
                90deg, #ff8873, #ff4f4f);
        border-radius: .04rem;
        display: inline-block;
        line-height: .24rem;
        padding: 0 .06rem 0 .02rem;
        font-size: .19rem;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #fff;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }

    .detail___3ZQFW .choiceInfo___3ZuEa .price___dfbCD {
        margin-bottom: .16rem;
        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-align-items: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
        height: .24rem;
        font-size: .24rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fe3738;
        line-height: .24rem;
    }

    .detail___3ZQFW .choiceInfo___3ZuEa .price___dfbCD u {
        text-decoration: none;
        font-size: .22rem;
        font-weight: 400;
        color: #777;
        line-height: .32rem;
    }

    .detail___3ZQFW .choiceInfo___3ZuEa .operation___3KazI button {
        border: none;
        width: 1.36rem;
        height: .4rem;
        line-height: .4rem;
        background: linear-gradient(
                270deg, #ff4afc, #da00ff);
        box-shadow: 0 0.02rem 0.06rem 0 rgb(255 39 252 / 43%);
        border-radius: .2rem;
        text-align: center;
        font-size: .22rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fff;
        line-height: .32rem;
    }

    .detail___3ZQFW .choiceInfo___3ZuEa .operation___3KazI span {
        height: .3rem;
        font-size: .2rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fa40fd;
        line-height: .3rem;
        margin-bottom: .1rem;
    }

    .detail___3ZQFW .choiceInfo___3ZuEa .operation___3KazI {
        position: absolute;
        right: .1rem;
        bottom: .06rem;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .loading {
        display: flex;
        position: fixed;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.2);
        top: 0;
        left: 0;
        z-index: 10;
        justify-content: center;
        align-items: center;
        font-size: .35rem;
        color: #333;
    }

</style>
